<template>
    <div class="headerbar clear-float">
		<div class="cover pull-left" >
	    <!-- <div class="tp" style="width: 55px;height: 100%;float: left;"><img @click="openuserinfo()" src="../../assets/img/user.png"></div> -->
	    <div class="tp" @click="openuserinfo()"><img  :src="imageUrl"></div>
	    <div class="xx" style="margin-left: 10px;">
	         <div class="name" style="float: left;margin-bottom: 10px;font-size:12px;">姓名:{{this.zwm}}</div><br />
	         <div class="gh" style="font-size:12px;width: 100%;float: left;">手机号码:{{this.dh}}</div>
	    </div>
		</div>
        <div class="school" style="float: left;margin-left: 25%;line-height: 55px; color: white;font-size: 20px;">{{this.logininfo.xxmc}}</div>

		<div class="close-admin pull-right" style="color: white;">
			<el-breadcrumb separator="/" class="close-admin" >
				<el-breadcrumb-item :to="{ path: '/home' }"><span style="color: white;">首页</span></el-breadcrumb-item>
				<el-breadcrumb-item><span style="color: white; cursor:pointer;" @click='componentsShow("dldgxq1")'>校区切换</span></el-breadcrumb-item>
				<el-breadcrumb-item><span style="color: white; cursor:pointer;" @click='componentsShow("add")'>设置</span></el-breadcrumb-item>
				<el-badge is-dot class="item" v-if="hd1"></el-badge>
				<el-breadcrumb-item :to="{ path: '/admin/xx' }"><span style="color: white;">{{item}}</span></el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/admin/jishi' }"><span style="color: white;">记事</span></el-breadcrumb-item>
				<el-breadcrumb-item ><span style="color: white; cursor:pointer;" @click='tc()'>退出</span></el-breadcrumb-item>
			</el-breadcrumb>
		</div>
	<AddComponent v-if="portComponents.add.toggle" @close="componentsHide"></AddComponent>
	<UserInfoComponent v-if="portComponents.useredit.toggle" @close="componentsHide"></UserInfoComponent>
    <DldgxqComponent v-if="portComponents.dldgxq1.toggle" @close="componentsHide" ></DldgxqComponent>
    </div>
</template>
<script type="text/javascript">
	 import { mapState } from 'vuex'
	 import AddComponent from './add'
	 import DldgxqComponent from '../dldgxq1'
     import qs from 'qs'
	 import UserInfoComponent from './userphotoedit'
	export default {
		 components: { AddComponent,UserInfoComponent,DldgxqComponent},
		data () {
			return {
				hd1:true,
        imageUrl:'',
        zwm:'',
        dh:'',
				item:'消息',
				item1:'待办事项',
               logininfo:null,
               totelNumber: new Array(8),
              portComponents: {
              	  add: {
                        type: 'add',
                        toggle: false,
                        params: '',
                        data: {}
                   },
              	  useredit: {
                        type: 'useredit',
                        toggle: false,
                        params: '',
                        data: {}
                   },
                   dldgxq1: {
                        type: 'dldgxq1',
                        toggle: false,
                        params: '',
                        data: {}
                    }
              }
			}


		},
//		beforeMount() {
////			alert(1);
//       //设置定时器，每3秒刷新一次
//       var self = this;
//       setInterval(getTotelNumber,1000)
//       function getTotelNumber() {
//           let newArray = new Array(8)
//           for(let i=0; i < this.totelNumber.length; i++){
//              newArray[i] = Math.ceil(Math.random()*10) -1
//          }
//          self.totelNumber = newArray
//       }
//       getTotelNumber();
//  },
		created(){
			 this.logininfo= JSON.parse(localStorage.logininfo)
			 this.hd();
       this.search()
		},
		methods: {
			tc(){
			this.$confirm('确认是否退出?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type:'warning'
			        }).then(() => {
			            this.$router.push('/')
			        }).catch(() => {
			          this.$message({
			            type: 'info',
			            message: '已取消退出'
			          });          
			        });
			},
//			open12() {
//              this.$notify({
//			          title: '待办事项',
//			          dangerouslyUseHTMLString: true,
//			          message: '事项内kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkinin\n\n\n\n容',
//			          position: 'top-left'
//                  });
//                  },
      search () {
    //查询搜索触发事件
        var logininfo = JSON.parse(localStorage.logininfo) ;
        var params3 = qs.stringify({
          id:logininfo.id,
          xxid:logininfo.xxid,
          yhid:logininfo.id
        });
          this.searchLoading = true;
          this.axios.post(this.$store.state.api + 'ls/info',params3)
          .then( res => {
              this.imageUrl = res.data.data.tx
              this.qm = res.data.data.qm
              this.zwm = res.data.data.zwmzw
              this.dh = res.data.data.dh
              this.searchLoading = false;
          }).catch( res => {
              console.log(res)
              this.searchLoading = false;
          })
      },
			hd(){

				var logininfo= JSON.parse(localStorage.logininfo)
				         var params3 = qs.stringify({
				           xxid:logininfo.xxid,
				            yhid: logininfo.id
						});
 				 this.axios.post(this.$store.state.api+'noticelist/ifyd',params3)
		         .then( res =>  {
		         	if(res.data.data.list[0].cnt=="0"){
		         		this.hd1=false;
		         	}else{
		         		this.hd1=true;
		         	}
		 					 }).catch(res => {
		 					 })
			},
			openuserinfo(){
				 this.portComponents.useredit.toggle=true;
			},
			close () {
				localStorage.clear();
			},
			 componentsShow (type,data) { //显示组件
                for ( let i in this.portComponents ) {
                    if (type == this.portComponents[i].type) {
                        this.portComponents[i].toggle = true;
                        this.portComponents[i].params = data;
                        if (this.portComponents[i].data.type == 'single') {
                            this.portComponents[i].data.index = data.id
                        }else if(this.portComponents[i].data.type == 'multiple'){
                            this.portComponents[i].data.index = this.multipleDelNum;
                        }else{
                            return;
                        }
                        return;
                    }
                }
            },
            componentsHide (setting) { //关闭组件
                 this.search();
                for ( let i in this.portComponents ) {
                    if (setting.type == this.portComponents[i].type) {
                        this.portComponents[i].toggle = false;
                        if (!setting.cancel) {
                           this.search();
                        }
                        return;
                    }
                }
            }
        },
	}
</script>
<style lang="less" scoped>
	.headerbar{
		width: 100%;
		height: 55px;
		background: #2a3b4c;
        position: fixed;
        z-index: 999;

		.cover{
		    width: 20%;
			height: 100%;
			margin-left: 5px;
			display: flex;
			align-items: center;
            color: white;
			img{
				width: 100%;
			}
		}
		.tp{
			width: 55px;
			height: 50px;
			float: left;
			border: 3px solid white;
			cursor: pointer;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.close-admin{
			display: flex;
			align-items: center;
			height: 100%;
			margin-right:16px;
			.name{
				margin-right:20px;
				color:white;
				font-size:12px;
				vertical-align: middle;
				width: 100px;
			}
			img{
				width: 20px;
				vertical-align: middle;
			}
			a{
				color:white;
				font-size:12px;
				vertical-align: middle;

				span{
					margin-left:3px;
				}
			}
			a:hover{
				/*color:#fff;*/
			}
		}

		.title{
			// display: inline-block;
			color: #fff;
		    font-size: 25px;
		    text-align: center;
		    line-height: 55px;
		}

	}
	.headerbar .close-admin img[data-v-669ce8be] {
    width: 13px;
    /*vertical-align: middle;*/
}
</style>
